<template>
	<div class="content-news">
		<div class="content-news">
			<div class="banner">
				<ul class="clearfix">
					<!-- <router-link tag="li" to="/detail/1?collectionName=banner"> -->
					<li>
						<img src="../assets/img/banner.png" alt="" />
						<!-- </router-link> -->
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
				</ul>
			</div>

		</div>

		<ul class="news" style="padding-bottom: 50px;">

			<!-- <router-link tag="li" class="list list-right-img" :to="`/detail/${item._id}?collectionName=news_news`" v-for="(item,index) of news"
			 :key="item._id">
				<div class="left">
					<div class="new">
						<p class="title list-ellipsis-1">{{item.title}}</p>
						<p class="content" v-html="item.main" style="margin-top: -10px;"></p>
					</div>
					<span class="time" style="padding-top: 2px;">{{item.fabushijian}}</span>
				</div>
				<div class="right">
					<img :src="require('../config').serverUrl + news[index].imgUrl" alt="">
				</div>
			</router-link> -->
			
			<router-link tag="li" class="list list-bottom-tri" :to="`/detail/${item._id}?collectionName=news_news`" v-for="(item,index) of news"
			 :key="item._id">
					<div class="top">
						<div class="title list-ellipsis-2">{{item.title}}</div>
						<div class="img-wrap">
							<div class="list-col-xs-4"><img :src="require('../config').serverUrl + news[index].imgUrl" alt=""></div>
							<div class="list-col-xs-4"><img :src="require('../config').serverUrl + news[index].imgUrl1" alt=""></div>
							<div class="list-col-xs-4"><img :src="require('../config').serverUrl + news[index].imgUrl2" alt=""></div>
						</div>
					</div>
					<div class="info">
						<span class="">{{item.fabushijian}}</span>
					</div>
				</router-link>

			<!-- 右图片 -->
			<!-- <li class="list list-right-img">
				<div class="left">
					<div class="new">
						<p class="title list-ellipsis-1">这是风水堪舆</p>
						<p class="content">风水之法，得水为上，藏风次之。”后世术家兼作“堪舆”的代称，相宅、相墓之法，辨证研究风水，去其糟粕，取其精华，用科学合理的方法来解释风水现象，只可用于趋吉避凶，不可痴迷其中。</p>
					</div>
					<span class="time">2018-10-22</span>
				</div>
				<div class="right">
					<img src="../assets/img/12.jpg" alt="">
				</div>
			</li> -->


			<!-- 
			 
			 -->

		<!-- 	<li class="list list-bottom-tri">
				<div class="top">
					<div class="title list-ellipsis-2">文章标题文章标题文章标题</div>
					<div class="img-wrap">
						<div class="list-col-xs-4"><img src="../assets/img/12.jpg" alt=""></div>
						<div class="list-col-xs-4"><img src="../assets/img/12.jpg" alt=""></div>
						<div class="list-col-xs-4"><img src="../assets/img/12.jpg" alt=""></div>
					</div>
				</div>
				<div class="info">
					<span class="">2018-10-25 10:35</span>
				</div>
			</li> -->

			<!-- 	<li class="list list-no-img">
				<div class="top">
					<div class="title list-ellipsis-2">道教认为人死之后会发生什么？</div>
					<p class="content">
						崇道人：“早期的道其形骸，考其魂神。善者有赏， 可上升受天之衣食，恶者受罚，谪作河梁山海之鬼。崇道人：“早期的道其形骸，考其魂神。善者有赏， 可上升受天之衣食，恶者受罚，谪作河梁山海之鬼。
					</p>
				</div>
				<div class="info">
					<span class="">2018-10-25 10:35</span>
				</div>
			</li> -->


		</ul>
	</div>
</template>

<script>
	// 缺失依赖，可以npm i 安装   , 注意版本的坑
	// 缺失的依赖，npm i 安装不到，（公司内部库）
	import $ from 'jquery';
	import Swipe from '../assets/js/swipe.js';
	export default {
		name: 'home',
		props: {},
		data() {
			return {
				news: []
			};
		},
		components: {},
		mounted() {
			new Swipe($('.banner')[0], {
				auto: 1500,
				continuous: true,
				stopPropation: true,
				callback: function(index, element) {
					$('.banner ol li').removeClass('active');
					$('.banner ol li')
						.eq(index)
						.addClass('active');
				}
			});
			this.$axios.all([
				this.$axios.get('/api/list/news_news'),
			]).then(
				this.$axios.spread((news) => { //所有数据回来，在渲染页面
					this.news = news.data;
					// console.log(this.news)
				})
			)
		},
		updated() {},
		methods: {}
	};
</script>

<style scoped>
	/* banner */
	.content .banner {
		margin-top: 0.6rem;
		position: relative;
		overflow: hidden;
		z-index: 1;
	}

	.banner ul li {
		padding-top: 20px;
		width: 6.4rem;
		float: left;
		position: relative;
	}

	.banner ul li img {
		width: 100%;
		display: block;
	}

	.banner ul li .text-box {
		width: 5.8rem;
		padding: 0 0.3rem;
		height: 1.24rem;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
	}

	/* news 列表 */
	.news {
		background: #fff;
		padding-left: 0.5em;
	}

	.news .list {
		display: flex;
		display: -webkit-flex;
		padding: 5px 5px 5px;
		margin: 0px 5px;
		border-bottom: 1px solid #ddd;
	}

	.news .list:last-child {
		border: 0;
	}


	/* 无图纯文字模式 */
	.list-no-img {
		flex-direction: column;
	}

	.list-no-img .top .title {
		font-weight: bold;
		height: 30%;
		font-size: 14px;
	}

	.list-no-img .top .content {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		line-height: 20px;
		font-size: 14px;
		margin-bottom: 5px;
		color: #666;
		margin: 5px 0;
	}

	.list-no-img .info {
		font-size: 10px;
		color: #bbb;
		display: flex;
	}

	.list-no-img .info .info-r-5 {
		margin-right: 5px;
	}

	.list-no-img .info .list-ellipsis-1 {
		max-width: 40%;
	}

	/* 无图纯文字模式结束 */


	/* 右图模式 */
	.list-right-img .left {
		width: 60%;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.list-right-img .left .title {
		font-weight: bold;
		height: 20px;
		font-size: 14px;
		/* background: #007AFF; */
	}

	.list-right-img .left .content {
		font-size: 13px;
		/* line-height: 12px; */
		height: 55px;
		color: #888;
		margin: 2px 0;
		/* background: deeppink; */
		/* color: #007AFF; */
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}

	.list-right-img .left .time {
		font-size: 12px;
		color: #bbb;
	}

	.list-right-img .right {
		padding-top: 5px;
		width: 40%;
		height: 80px;
		margin-left: 10px;
	}

	.list-right-img .right img {
		width: 100%;
		height: 100%;
		border-radius: 5px;
		/* height: 80px; */
	}

	/* 右图模式结束 */


	/* 下三图模式 */
	.list-bottom-tri {
		flex-direction: column;
	}

	.list-bottom-tri .title {
		font-weight: bold;
		height: 30%;
		font-size: 14px;
	}

	.list-bottom-tri .img-wrap {
		border-radius: 5px;
		display: flex;
		margin: 5px 0;
	}

	.list-bottom-tri .img-wrap img {
		width: 100%;
		border-radius: 5px;
		height: 80px;
	}

	.list-bottom-tri .info {
		font-size: 10px;
		color: #bbb;
		display: flex;
	}

	.list-bottom-tri .info .info-r-5 {
		margin-right: 5px;
	}

	.list-bottom-tri .info .list-ellipsis-1 {
		max-width: 40%;
	}

	/* 下三图模式结束 */

	/* 其他 */

	/* 单行省略 */
	.list-ellipsis-1 {
		/* padding: 1px; */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 两行省略 */
	.list-ellipsis-2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* 平分3个 */
	.list-col-xs-4 {
		width: 33.333%;
		padding: 0 2px;
	}

	.headlunbo {

		width: 100%;
		background-color: #007AFF;
	}

	.swiper-container {
		width: 100%;
		height: 100%;
		margin: auto;
	}

	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.img_b {
		width: 100%;
		height: 100%;
	}

	.tabbable {
		line-height: 1.2em;
		padding-top: 0em;
	}

	.tab_t {
		font-weight: 600;
		font-size: 1.2em;
		margin-top: 0.7em;
		margin-left: 1.2em;
		padding-bottom: 0.6em;
	}

	.pa_t {
		position: relative;
	}

	.pa_t>li {
		width: 7em;
		/* background-color: #007AFF; */

	}

	.tab_t>a {
		color: #343434 !important;
		;
		text-decoration: none;
	}

	.active {
		/* color: #43a1f8 !important; */
		/* border-bottom: 0.2px solid #007AFF;
						 /* background-color: #4ea2f2; */


	}

	.active::after {
		content: '';
		width: 20%;
		display: block;
		margin: 0 auto;
		border-bottom: 0.3em solid #007AFF;
	}

	.active2::after {
		border-bottom: 0em solid #007AFF;
	}
</style>
